import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, message, Switch } from 'antd';
import { connect } from 'react-redux'
import './MyFormbox.scss'
interface Props {
    children?: any
    fromtitle?: any
    onFinish?: any
    record?: any
    managerList: any
}
function MyFormbox(props: Props) {

    let [options, setOptions] = useState([{ label: "超级管理员", value: "超级管理员" }, { label: "医生", value: "医生" }, { label: "护士", value: "护士" }])
    const [form] = Form.useForm();
    // 引入生命周期

    useEffect(() => {
        if (props.record) {
            form.setFieldsValue(props.record)
        }
    })

    // 取消
    const onReset = () => {
        form.resetFields();
    };


    // 保存
    const onFinish = (values: any) => {
        // 添加key值和日期  
        let data = new Date()
        // 添加日期
        let newdata = data.getFullYear() + '/' + data.getMonth() + '/' + data.getDay() + ' ' + data.getHours() + ":" + data.getMinutes()
        let newvalues = JSON.parse(JSON.stringify(values))
        newvalues.time = newdata
        newvalues.key = values.name
        props.onFinish(newvalues)
    };



    return (
        <div className="Fromborder">
            <div className='Fromborder_'>
                <div className="addtitle">
                    {props.fromtitle}
                </div>
                {/* 放置表单插槽 */}
                <div className="from_box">
                    <Form
                        name="basic"
                        form={form}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 16 }}
                        onFinish={onFinish}
                        style={{ backgroundColor: "white", width: 400, borderRadius: 50, paddingTop: 30, paddingRight: 50 }}
                    >
                        <Form.Item
                            label="用户名"
                            name="name"
                            rules={[{ required: true, message: '请输入内容！' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="账号"
                            name="user"
                            rules={[{ required: true, message: '请输入内容!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="角色"
                            name="role"
                            rules={[{ required: true, message: '请选择角色!' }]}
                        >
                            <Select
                                defaultValue="请选择角色"
                                style={{ width: 120 }}
                                options={options}
                            />
                        </Form.Item>

                        <Form.Item
                            label="手机号码"
                            name="phone"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="pass"
                            rules={[{ required: true, message: '请输入内容!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="是否启用"
                            name="switch"
                        >
                            <Switch />
                        </Form.Item>


                        <Form.Item wrapperCol={{ offset: 10, span: 10 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                            <Button htmlType="button" style={{ marginLeft: 10 }} onClick={onReset} >
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

// export default MyFormbox;
export default connect(
    (state: any) => {
        return {
            managerList: state.managerList
        }
    },
    (dispatch) => {
        return {

        }
    }
)(MyFormbox)